<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>转换</title>
		<style type="text/css">
			.box{
				/* 盒子摆在boby的正中间 */
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 300px;
				height: 300px;
				background-color: aqua;
				/* transform: translateX(100px) translateY(200PX); */
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: black;
				margin: auto;
				transition: all 2s linear;
				transform-origin: left top;
				/* transform-origin: 转换的中心; 
				方位词：水平方向（left,center,right）
				垂直方向（top,center,bottom）*/
				
			}
			.box2:hover{
				scale();缩放
				transform: scale(-3);
				/* transform: scaleY(2); */
				/* transform: rotatey(-90deg); */
				 /*rotate(): 旋转 45deg度  正数顺时针，负数逆时针*/
				 /* transform: skew(45deg); */
				 /* skew():倾斜 deg度*/
				 transform-origin: 50%,50%;
				 
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<div class="box2"></div>
	</body>
</html>
